<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .wrap{
        width: 80%;
        margin: 20px auto;
      }
      span{
        border: 1px solid black;
      }
  </style>
</head>
<body>
  <div class="wrap">
    <input type="text" id="veri">
    <span id="codeEle" >8757</span>
    <button id="checkCode">验证</button>
</div>

<script>
  // 显示验证码的span
  var codeEle=document.getElementById("codeEle");
    // 生成验证码函数
      function makeCode(){ 
         var code=""//验证码
          var str="abcdefghigklmn123456789ABCDEFGHIGKLMN"; //37
          for(var i=0;i<4;i++){
            // 随机下标
            var index=Math.floor(Math.random()*str.length);
            code+=str[index]//把每次随机到的字符串 加到code上
          }
          return code
      } 
      // console.log(makeCode())
      codeEle.innerHTML=makeCode(); //渲染验证码到元素

      //把生成的验证码 绘制成canvans


      

      // 点击验证码 切换验证码
      codeEle.onclick=function(){
        // 从新调用函数生成验证码 
        codeEle.innerHTML=makeCode();
      }

      //  点击验证判断输入的验证码 和生产的验证码 是否相等
      var checkCode=document.getElementById("checkCode");
      // 输入验证码的输入框
      var veri=document.getElementById("veri");
      checkCode.onclick=function(){
          if(veri.value==codeEle.innerHTML){ //输入的验证码和显示的验证码对比
              alert("验证码正确")
          }else{
            alert("验证码错误")
          }
      }

</script>
</body>
</html>